<template>
  <div>
    <v-card style="width:100%;">
      <v-card-title>
        <h3>{{name}}</h3>
        <v-spacer></v-spacer>
        <v-btn color="primary" @click.stop="hostSearch" small><h4>查询</h4></v-btn>
        <v-btn color="teal" dark  @click.stop="clearHostList($refs.searchForm)" small><h4>重置</h4></v-btn>
      </v-card-title>
    <v-card-text>
      <v-form ref="searchForm">
      <v-layout row wrap>
        <v-flex xs12 sm4 md2 class="pr-3">
          <v-autocomplete :items="status.items" v-model="status.value" item-text="text" item-value="value" label="主机状态" :clearable="true" autocomplete ></v-autocomplete>
        </v-flex>
        <v-flex xs12 sm4 md2 class="pr-3">
          <v-autocomplete :items="type.items" v-model="type.value" item-text="text" item-value="value" label="设备类型" :clearable="true" autocomplete ></v-autocomplete>
        </v-flex>
        <v-flex xs12 sm4 md2 class="pr-3">
          <v-autocomplete :items="env.items" v-model="env.value" item-text="text" item-value="value" label="环境" :clearable="true" autocomplete ></v-autocomplete>
        </v-flex>
        <v-flex xs12 sm4 md2 class="pr-3">
          <v-autocomplete :items="clouds.items" v-model="clouds.value" item-text="text" item-value="value" :clearable="true" label="来源" autocomplete ></v-autocomplete>
        </v-flex>
        <v-flex xs12 sm4 md2 class="pr-3">
          <data-picker :title="'开始时间'" :ui="'menu'" :date="sdate" @upDate="sDateValue"/>
        </v-flex>
        <v-flex xs12 sm4 md2 class="pr-3">
          <data-picker :title="'结束时间'" :ui="'menu'" :date="edate" @upDate="eDateValue"/>
        </v-flex>
      </v-layout>
      </v-form>
      </v-card-text>
    </v-card>
    <p></p>
      <v-card >
        <v-card-title>
          <v-flex xs12 sm12 md5 class="pr-3">
          <v-btn color="info" :loading="loadsync" @click.native="loadBtn" :disabled="loadsync" small>
            <h4>一键同步</h4>
            <span slot="loader" class="loop">
              <v-icon light>cached</v-icon>
            </span>
          </v-btn>
          <newhost></newhost>
          <v-btn dark color="teal" @click.stop="hostDownload" small><v-icon dark>file_download</v-icon></v-btn>
          </v-flex>
          <v-flex xs12 sm12 md7 class="pr-3">
          <v-text-field append-icon="search" :label="searchLabel" single-line hide-details v-model="search"></v-text-field>
          </v-flex>
          <edithost :editdialog = "editdialog" :id = "id"></edithost>
        </v-card-title>
          <v-data-table
            :headers="headers"
            :items="items"
            :pagination.sync="pagination"
            :total-items="totalItems"
            :loading="loading"
            :rows-per-page-items="rowsPerPageItems"
            :no-data-text="etext"
            class="elevation-1">
            <template slot="items" slot-scope="props">
              <td ><img class="logo" :src="'/static/'+props.item.clouds+'.png'" width="20px" alt="avatar"></td>
              <td class="datastyle" v-for="(value) in tempHeader" :key="value.id" @click.stop="openHostEdit(props.item)">{{props.item[value.value]}}</td>
            </template>
            <template slot="no-data">
              <v-alert :value="true" color="error" icon="warning">
                {{etext}}
              </v-alert>
            </template>
          </v-data-table>
      </v-card>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('listhost')

export default {
  data: function () {
    return this.$store.state.listhost
  },
  watch: {
    pagination () {
      this.handlerHost()
    },
    search () {
      this.handlerHost()
    }
  },
  methods: {
    ...mapActions({
      handlerHost: 'handlerHost',
      loadHostFilters: 'loadHostFilters',
      openHostEdit: 'openHostEdit',
      hostSearch: 'hostSearch',
      hostDownload: 'hostDownload',
      clearHostList: 'clearHostList',
      loadHostHeaders: 'loadHostHeaders',
      loadBtn: 'loadBtn'
    }),
    sDateValue (date) {
      this.sdate = date
    },
    eDateValue (date) {
      this.edate = date
    }
  },
  mounted () {
    this.loadHostFilters()
    this.loadHostHeaders()
  },
  components: {
    newhost: () => import('../host/newhost'),
    edithost: () => import('../host/edithost'),
    'data-picker': () => import('../../components/dateTimePicker/dataPicker')
  }
}
</script>
